<template>
<div id="player-wrap">
  <h1>player</h1>
  <h3>{{showPlayerPanel}}</h3>

  <transition enter-active-class="mini-slide-in" leave-active-class="mini-slide-out">
    <mini-player v-show="showMiniPlayer" @show-player-panel="handlePlayerPanel"/>
  </transition>

  <transition>
    <normal-player v-if="showPlayerPanel" @close-player-panel="handlePlayerPanel"/>
  </transition>

</div>
</template>

<script>
import MiniPlayer from './children/mini-player'
import NormalPlayer from './children/normal-player'
export default {
  components: {
    MiniPlayer,
    NormalPlayer
  },
  data(){
    return {
      showMiniPlayer: true,
      showPlayerPanel: true
    }
  },
  methods: {
    handlePlayerPanel(){
      this.showPlayerPanel = !this.showPlayerPanel;
    }
  }
}
</script>

<style scoped>
#player-wrap{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0;
  z-index: 1000;
}
@keyframes mini-slide-in {
  0%{
    transform: translateY(100%);
  }
  100%{
    transform: translateY(0);
  }
}
@keyframes mini-slide-out {
  0%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(100%);
  }
}
.mini-slide-in{
  animation: mini-slide-in 300ms ease-in;
}
.mini-slide-out{
  animation: mini-slide-out 300ms ease-out;
}
</style>